<template>
    <div class="good-list">
        <el-row>
            <el-col :span="24">
                <el-input placeholder="请输入内容" v-model.trim="name" style="width:135px;"></el-input>

                <!-- clearable 意味着它的属性值是true -->
                <CateSelect v-model="cate" clearable></CateSelect>

                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="$router.push('/good/add')">添加</el-button>
                <el-button type="primary" icon="el-icon-download">导出</el-button>
                <el-checkbox style="margin-left:20px">审核人</el-checkbox>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <!-- :data="list 给表格指定数据源" -->
        <el-table
            :data="list"
            style="width: 100%; margin-top: 20px;"
            border
        >
            <el-table-column prop="id" label="序号" align="center" width="100">
                <template slot-scope="{row}">
                    <div>{{row.id + 1}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品" align="center" width="180">
                <template slot-scope="{row}">
                    <img :src="`?`" style="width: 60px;" alt="">
                    <div>{{row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">
                <template slot-scope="{row}">
                    <div>{{`￥${row.price}`}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="cate" label="品类" align="center">
                <template slot-scope="{row}">
                    <div>{{row.cate}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="hot" label="是否热销" align="center">
                <template slot-scope="{row}">
                    <div>{{row.hot ? '是' : '否'}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="发布时间" align="center">
                <template slot-scope="{row}">
                    <div>{{row.create_time}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="check_status" label="商品状态" align="center">
                <template slot-scope="{row}">
                    <div>{{row.check_status ? '已上架' : '待审核'}}</div>
                </template>
            </el-table-column>

            <!-- 操作 -->
            <!-- <el-table-column align="center" label="Actions" width="120">
                <template slot-scope="scope">
                    <router-link :to="'/good/edit/'+scope.row.id">
                        <el-button type="primary" size="small" icon="el-icon-edit">
                            Edit
                        </el-button>
                    </router-link>
                </template>
            </el-table-column> -->
            <!-- 操作 -->
        <el-table-column label="操作" align="center" width="230">
            <template slot-scope="{row}">
                <el-button type="primary" size="mini" @click="toEdit(row)">编辑</el-button>
                <el-button v-if="row.published" type="primary" size="mini">详情</el-button>
                <!-- <el-button v-else type="success" size="mini">审核</el-button> -->
                <el-button size="mini" type="danger" @click="deleteGood(row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 20px" :current-page="page" :page-sizes="[2 , 5 , 10 , 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

        <!-- 测试 -->
        <!-- <button @click="shuju">测试</button> -->
    </div>
</template>

<script>
    import CateSelect from "./components/CateSelect.vue"
    import {mapState} from "vuex"
    // import {getGoodList,goodDel} from "@/api/goods"
    import axios from 'axios'

    export default {
        name:"goodList",
        components:{
            CateSelect
        },
        props:[],
        data(){
            return {
                
                list: [{}],    // 表格的数据源
                
                page: 1,     // 第几页  分页组件必须的
                size: 3,     // 每页显示几条数据    分页组件必须的
                total:0,     // 前端要实现分页，必须知道总记录数

                name: "",     // 模糊查询
                cate: "",     // 商品分类
                // count: 0      // 计数器，解决重复请求
            };
        },
        watch: {
            count() {
                // this.getList(); //当count变化，获取最新数据
            },
            '$route.query':{
                immediate:true,
                handler(New,Old){
                    if(this.$route.query.name !== undefined){
                        setTimeout(() => {
                            this.list.push(New)
                            this.$router.push({query:{}})
                            const leng = this.list.length
                            var listNew = this.list[leng - 1]
                            listNew['id'] = leng - 1
                            // console.log(this.list)
                        }, 500);
                    }
                    // console.log('收到了')
                }
            }
        },
        created() {
            // this.getList();

            this.shuju();
        },
        computed: {
            // ...mapState("goods",["cates"])
        },
        methods:{
            shuju(){
                axios.get('/api/goodsMy')
                .then((res)=>{
                    // console.log(res)
                    this.list = res.data.users

                    // console.log(this.list)
                })
            },

            // 获取商品列表
            // getList(){
            //     let prams = {
            //         page: this.page,    // 获取第几页数据
            //         size: this.page,    // 一页几条数据
            //         cate: this.page,    // 默认值是空  表示所有分类
            //         name: this.name
            //     }
            //     getGoodList(prams).then(res => {
            //         // console.log("res:", res);
            //         if(res.data && res.data.list) {
            //             this.list = res.data.list;
            //             this.total = res.data.total;
            //         }
            //     }) 
            // },
            // 根据英文分类，转化为中文分类
            // cate2ZH(cate) {
            //     let res = this.cates.filter(item => item.cate === cate);
            //     if(res.length === 1) {
            //         return res[0].cate_zh;
            //     } else {
            //         return "暂无分类"
            //     }
            // },
            // 点击搜索
            searchClick() {
                // 笨方法中，只需要重新发送ajax请求就OK
                // this.getList();
            },
            // 点击编辑
            toEdit(row) {
                this.$router.push("/good/edit/"+row._id)
            },
            // 点击删除
            deleteGood(row) {
                // #region 视频代码
                // this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                //     }).then(() => {
                //     // 根据id实现删除
                //         goodDel(row._id).then(res => {
                //             if(res.msg === "success") {
                //                 this.$message({
                //                 type: 'success',
                //                 message: '删除成功!'
                //                 });
                //                 // 是把后端数据库中的数据删除了
                //                 this.getList(); // 重新获取数据
                //             }
                //         })
                        
                //     }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '已取消删除'
                //     });          
                // });
                // #endregion 视频代码

            
            // console.log(row)
            this.list = this.list.filter(item => item.id !== row.id)
            
            }

            // 改变一页面显示几条数据触发
            // handleSizeChange(val) {
            //     // console.lgo(val);
            //     this.size = val;   
            //     // this.getList();
            //     if(this.page === 1) {
            //         this.count++
            //     }
            // },
            // 当页码发生变化，就触发
            // handleCurrentChange(val) {
            //     // console.lgo(val);
            //     this.page = val;   // page表示第几页
            //     // this.getList();

                // this.count++  //当页码变了，只需要改变count
            // },
        },
        filters: {
            time(value) {
                return moment(value).format("YYYY年MM月DD日 HH:mm");
            }
        }
    }
</script>

<style scoped>
    .good-list {
        padding: 20px;
        box-sizing: border-box;
    }
</style>